<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.outer {
	/* border: 2px red solid; */
	width: 50px;
	height: 50px;
	position: relative;
	margin: 200px auto;
	animation: xin 6s linear infinite alternate;
	transform-style: preserve-3d;
}

.outer1 {
	transform-style: preserve-3d;
	transform: rotateY(60deg);
	position: relative;
}

.outer2 {
	transform-style: preserve-3d;
	transform: rotateY(30deg);
	position: relative;
}

.outer3 {
	transform-style: preserve-3d;
	transform: rotateY(90deg);
	position: relative;
}

.outer4 {
	transform-style: preserve-3d;
	transform: rotateY(120deg);
	position: relative;
}

.outer5 {
	transform-style: preserve-3d;
	transform: rotateY(150deg);
	position: relative;
}

.a {
	border: 2px blue solid;
	border-radius: 50% 50% 0 0;
	border-left: none;
	position: absolute;
	width: 100px;
	height: 200px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(45deg);
	background-color: blue;
}

.b {
	border: 2px blue solid;
	border-radius: 50% 50% 0 0;
	border-right: none;
	position: absolute;
	width: 100px;
	height: 200px;
	left: -72px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(-45deg);
	background-color: blue;
}

.c {
	border: 2px violet solid;
	border-radius: 50% 50% 0 0;
	border-left: none;
	position: absolute;
	width: 100px;
	height: 200px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(45deg);
	background-color: violet;
}

.d {
	border: 2px violet solid;
	border-radius: 50% 50% 0 0;
	border-right: none;
	position: absolute;
	width: 100px;
	height: 200px;
	left: -72px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(-45deg);
	background-color: violet;
}

.e {
	border: 2px pink solid;
	border-radius: 50% 50% 0 0;
	border-left: none;
	position: absolute;
	width: 100px;
	height: 200px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(45deg);
	background-color: pink;
}

.f {
	border: 2px pink solid;
	border-radius: 50% 50% 0 0;
	border-right: none;
	position: absolute;
	width: 100px;
	height: 200px;
	left: -72px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(-45deg);
	background-color: pink;
}

.g {
	border: 2px yellow solid;
	border-radius: 50% 50% 0 0;
	border-left: none;
	position: absolute;
	width: 100px;
	height: 200px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(45deg);
	background-color: yellow;
}

.h {
	border: 2px yellow solid;
	border-radius: 50% 50% 0 0;
	border-right: none;
	position: absolute;
	width: 100px;
	height: 200px;
	left: -72px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(-45deg);
	background-color: yellow;
}

.i {
	border: 2px orange solid;
	border-radius: 50% 50% 0 0;
	border-left: none;
	position: absolute;
	width: 100px;
	height: 200px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(45deg);
	background-color: orange;
}

.j {
	border: 2px orange solid;
	border-radius: 50% 50% 0 0;
	border-right: none;
	position: absolute;
	width: 100px;
	height: 200px;
	left: -72px;
	transform-style: preserve-3d;
	transform: rotateY(0deg) rotateZ(-45deg);
	background-color: orange;
}

@keyframes xin {
	from {transform: rotateY(0deg) rotateX(0deg);
}

to {
	transform: rotateY(360deg) rotateX(30deg);
}
}
</style>
</head>
<body>
	<div class="outer">
		<div class="outer1">
			<div class="a"></div>
			<div class="b"></div>
		</div>
		<div class="outer2">
			<div class="c"></div>
			<div class="d"></div>
		</div>
		<div class="outer3">
			<div class="e"></div>
			<div class="f"></div>
		</div>
		<div class="outer4">
			<div class="g"></div>
			<div class="h"></div>
		</div>
		<div class="outer5">
			<div class="i"></div>
			<div class="j"></div>
		</div>
	</div>
</body>
</html>